<template>
  <div
    class="at-info-item"
    :style="{ width: itemWidth }"
    :class="{
      'at-info-item--left': labelPosition == 'left',
      'at-info-item--top': labelPosition == 'top',
    }"
  >
    <div class="at-info-label" :style="{ width: labelWidth }">
      {{ label }}
    </div>
    <div class="at-info-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { inject, computed } from 'vue'

const atInfo = inject('at-ui/components/Info')

const props = defineProps({
  label: { type: String },
  value: { type: String },
  itemWidth: null, // 组件宽度
  labelWidth: null, // 标签宽度
  labelPosition: null,
})

const labelPosition = computed(() => {
  return props.labelPosition || atInfo.labelPosition || 'left'
})

// 组件宽度
const itemWidth = computed(() => {
  return props.itemWidth || atInfo.columnWidth
})

// 标签宽度
const labelWidth = computed(() => {
  return props.labelWidth || atInfo.labelWidth || '100px'
})
</script>

<style lang="scss" scoped>
.at-info-item {
  display: flex;
}

.at-info-item--top {
  flex-direction: column;
  margin-bottom: 12px;
  .at-info-label {
    margin-bottom: 12px;
  }
}

.at-info-item--left {
  margin-bottom: 12px;
  padding-right: 12px;
  .at-info-label {
    margin-right: 12px;
  }
}

.at-info-label {
  width: 100px;
  color: #999;

  word-wrap: break-word; // 允许单词断开
}
.at-info-content {
  flex: 1;
  word-break: break-all;
  overflow: hidden;
  color: #1a1a1a;
}
</style>
